#折れ線グラフ

折れ線グラフは、データ ポイントを直線上にプロットする方法です。多くの場合、傾向データ、または 2 つのデータセットの比較を表示するために使用されます。

const config = {
  type: 'line',
  data: data,
};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

#データセットのプロパティ

名前空間:

• data.datasets[index]- このデータセットのみのオプション
• options.datasets.line- すべてのライン データセットのオプション
• options.elements.line- すべてのオプション線要素
• options.elements.point- すべてのオプション点要素
• options- チャート全体のオプション

折れ線グラフを使用すると、データセットごとにいくつかのプロパティを指定できます。これらは、特定のデータセットの表示プロパティを設定するために使用されます。たとえば、線の色は一般的にこのように設定されます。

これらすべての値がundefined、で説明されているスコープにフォールバックします。オプションの解決策

#全般的

#ポイントスタイリング

各ポイントのスタイルは、次のプロパティで制御できます。

これらすべての値がundefined、最初にデータセット オプションにフォールバックし、次に関連するオプションにフォールバックします。elements.point.*オプション。

#ラインのスタイリング

線のスタイルは、次のプロパティで制御できます。

値がundefined、値は関連付けられた値にフォールバックされます。elements.line.*オプション。

#インタラクション

各ポイントとの相互作用は、次のプロパティで制御できます。

#三次補間モード

次の補間モードがサポートされています。

• 'default'
• 'monotone'

の'default'アルゴリズムはカスタムの重み付け三次補間を使用し、あらゆる種類のデータセットに対して快適な曲線を生成します。

の'monotone'アルゴリズムの方が適していますy = f(x)データセット: 内挿されるデータセットの単調性 (または区分的単調性) を保持し、局所的な極値 (存在する場合) が入力データ ポイントに留まるようにします。

そのまま放置しておくと（undefined）、グローバルoptions.elements.line.cubicInterpolationModeプロパティが使用されます。

#セグメント

線分スタイルは、segment物体。現在、すべてのborder*とbackgroundColorオプションがサポートされています。セグメント スタイルは、各ポイント間のラインのセクションごとに解決されます。undefined主線スタイルへのフォールバック。

スクリプト可能セグメントのコンテキストには、次のプロパティが含まれます。

• type:'segment'
• p0: 最初の点要素
• p1: 2 番目の点要素
• p0DataIndex: データ配列の最初の点のインデックス
• p1DataIndex: データ配列の 2 番目のポイントのインデックス
• datasetIndex: データセットのインデックス

使用例

#段付き

次の値がサポートされていますstepped。

• false: ステップ補間なし (デフォルト)
• true: 補間前のステップ (eq.'before')
• 'before': 補間の前段階
• 'after': 補間後のステップ
• 'middle': ステップ中間補間

もしstepped値が false 以外に設定されている場合、tension無視されます。

#デフォルトのオプション

作成されたすべての折れ線グラフに構成設定を適用することが一般的です。グローバル折れ線グラフ設定は次の場所に保存されます。Chart.overrides.line。グローバル オプションを変更すると、変更後に作成されたグラフにのみ影響します。既存のチャートは変更されません。

たとえば、すべての折れ線グラフを次のように設定するには、spanGaps = trueあなたならこうします:

Chart.overrides.line.spanGaps = true;

#データ構造

サポートされているすべてのデータ構造折れ線グラフと一緒に使用できます。

#積み上げ面グラフ

y 軸の設定を変更して積み上げを有効にすることで、折れ線グラフを積み上げ面グラフに構成できます。積み上げ面グラフを使用すると、1 つのデータ傾向が多数の小さな部分からどのように構成されているかを示すことができます。

const stackedLine = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                stacked: true
            }
        }
    }
});

#縦折れ線グラフ

垂直折れ線グラフは、水平折れ線グラフのバリエーションです。 これを達成するには、indexAxisオプションオブジェクトのプロパティを'y'。 このプロパティのデフォルトは次のとおりです'x'したがって、水平線が表示されます。

const config = {
  type: 'line',
  data: data,
  options: {
    indexAxis: 'y',
    scales: {
      x: {
        beginAtZero: true
      }
    }
  }
};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    axis: 'y',
    label: 'My First Dataset',
    data: [65, 59, 80, 81, 56, 55, 40],
    fill: false,
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1
  }]
};

#設定オプション

縦折れ線グラフの構成オプションは、縦棒グラフの構成オプションと同じです。折れ線グラフ。ただし、折れ線グラフの X 軸に指定されたオプションはすべて、縦折れ線グラフの Y 軸に適用されます。

#内部データ形式

{x, y}